<!--
 * @Description: 
 * @Version: 1.0
 * @Author: wenbin
 * @Date: 2021-06-03 14:45:35
 * @LastEditors: wenbin
 * @LastEditTime: 2021-06-03 16:02:57
 * @FilePath: /magus-plugin/examples/components/rule/index.vue
 * Copyright (C) 2021 wenbin. All rights reserved.
-->
<template>
  <div class="rule">
    <div class="rule-data">
      <div
        class="rule-data-item"
        v-for="(ruleItem, ruleIndex) in ruleData"
        :key="ruleIndex"
      >
        <h3 class="rule-item-title">
          规则{{ ruleIndex + 1 }}
          <i @click="deleteRule(ruleIndex)" class="el-icon-close"></i>
        </h3>
        <div class="rule-item-list">
          <label class="rule-list-name">表达式</label>
          <el-row class="rule-list-ae" :gutter="2">
            <el-col :span="4">
              <el-select
                size="mini"
                v-model="ruleItem.ae"
                placeholder="请选择表达式"
              >
                <el-option
                  v-for="item in aeData"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-input
                size="mini"
                v-model="ruleItem.value"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
        </div>
        <div class="rule-item-list">
          <label class="rule-list-name">数据展示</label>
          <el-row class="rule-list-ae" :gutter="2">
            <el-col :span="4">
              <el-select
                size="mini"
                v-model="ruleItem.status"
                placeholder="数据展示类型"
              >
                <el-option label="展示值" value="value"></el-option>
                <el-option label="展示图标" value="icon"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4" v-if="ruleItem.status == 'value'">
              <el-select
                size="mini"
                v-model="ruleItem.valuetype"
                placeholder="数据展示方式"
              >
                <el-option label="原始值" value="auto"></el-option>
                <el-option label="自定义" value="custom"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4" v-if="ruleItem.valuetype == 'custom'">
              <el-input
                size="mini"
                v-model="ruleItem.showvalue"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
            <el-col :span="4" v-if="ruleItem.status == 'icon'">
              <div
                class="rule-list-value-icon"
                @click="goChooseIcon(ruleIndex)"
              >
                <magus-icon :icon="ruleItem.icon" :size="18"></magus-icon>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="rule-item-list">
          <label class="rule-list-name">颜色展示</label>
          <el-row class="rule-list-ae" :gutter="2">
            <el-col :span="4">
              <el-color-picker
                size="mini"
                v-model="ruleItem.color"
                show-alpha
                :predefine="predefineColors"
              ></el-color-picker>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-button type="text" @click="addRules" size="mini">新建规则...</el-button>
    <magus-choose-icon
      :isShow="iconData.isShow"
      @changeIcon="changeIcon"
      @cancelChoose="cancelChoose"
    ></magus-choose-icon>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      ruleData: [],
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "#c7158577",
        "#333333",
      ],
      iconData: {
        isShow: false,
        activeIndex: "",
      },
      aeData: [
        {
          text: "等于",
          value: "eq",
        },
        {
          text: "不等于",
          value: "neq",
        },
        {
          text: "大于",
          value: "gt",
        },
        {
          text: "大于等于",
          value: "egt",
        },
        {
          text: "小于",
          value: "lt",
        },
        {
          text: "小于等于",
          value: "elt",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    addRules() {
      this.ruleData.push({
        ae: "",
        aevalue: "",
        showvalue: "",
        status: "",
        valuetype: "",
        icon: "",
        color: "",
      });
    },
    changeIcon(datas) {
      this.$set(
        this.ruleData[this.iconData.activeIndex],
        "icon",
        datas.icon.replace("#", "")
      );
      this.cancelChoose();
    },
    cancelChoose() {
      this.iconData = {
        isShow: false,
        activeIndex: "",
      };
    },
    goChooseIcon(index) {
      this.iconData.activeIndex = index;
      this.iconData.isShow = true;
    },
    deleteRule(index) {
      this.ruleData.splice(index, 1);
    },
    getRuleData() {
      return this.ruleData;
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/static.scss";
.rule {
  .rule-data {
    .rule-data-item {
      border: 1px solid #e5e5e5;
      padding-bottom: 5px;
      margin-bottom: 5px;
      .rule-item-title {
        padding: 0 15px;
        line-height: 30px;
        height: 30px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
        margin-bottom: 15px;
        position: relative;
        .el-icon-close {
          position: absolute;
          font-size: 14px;
          right: 15px;
          top: 8px;
          cursor: pointer;
        }
      }
      .rule-item-list {
        margin-bottom: 10px;
        @include flexs();
        .rule-list-name {
          font-size: 14px;
          width: 80px;
          text-align: right;
          margin-right: 10px;
          @include flexShrink(0);
        }
        .rule-list-ae {
          @include flexGrow(1);
          .rule-list-value-icon {
            width: 28px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            border: 1px solid #e5e5e5;
            border-radius: 5px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
